<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.css">
    <link rel="stylesheet" href="./animate.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .banner {
            width: 100%;
            height: 100%;
        }

        .first {
            background-color: orange;
            position: relative;
        }

        .first>p:nth-child(1) {
            width: 100%;
            height: 100%;
        }

        .first>p:nth-child(1)>img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .first>p:nth-child(2) {
            position: absolute;
            left: 50%;
            transform: translateX(-40%);
            top: 50px;
        }

        .first>p:nth-child(3) {
            width: 100%;
            text-align: center;
            font-size: 30px;
            font-weight: 700;
            color: #fff;
            position: absolute;
            top: 300px;
        }

        .first.active>p:nth-child(3) {
            animation: bounceInRight 1s linear;
        }

        .second {
            background-color: skyblue;
            position: relative;
        }

        .second>p {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            position: absolute;
            left: 500px;
        }

        .second>p:nth-child(1) {
            top: 30px;
        }

        .second>p:nth-child(2) {
            top: 80px;
        }

        .second>p:nth-child(3) {
            top: 130px;
        }

        .second>p:nth-child(4) {
            top: 180px;
        }

        .second>p:nth-child(5) {
            top: 230px;
        }

        .second>p:nth-child(6) {
            top: 280px;
        }

        .second.active>p:nth-child(1) {
            animation: leftDown 1s linear both;
        }

        .second.active>p:nth-child(2) {
            animation: leftDown 1s .3s linear both;
        }

        .second.active>p:nth-child(3) {
            animation: leftDown 1s .6s linear both;
        }

        .second.active>p:nth-child(4) {
            animation: leftDown 1s .9s linear both;
        }

        .second.active>p:nth-child(5) {
            animation: leftDown 1s 1.2s linear both;
        }

        .second.active>p:nth-child(6) {
            animation: leftDown 1s 1.5s linear both;
        }

        .third {
            background-color: purple;
        }
        .third.active>p:nth-child(1) {
            animation: rubberBand 1s linear;
        }


        /* 设计动画 */
        @keyframes leftDown {
            0% {
                left: 500px;
            }

            40% {
                left: 10px;
            }

            60% {
                left: 50px;
            }

            100% {
                left: 30px;
            }
        }
    </style>
</head>

<body>
    <div class="swiper banner" id="banner">
        <div class="swiper-wrapper">
            <!-- 这里一个 slide 就是一屏的内容 -->
            <!-- 第一页 [0] -->
            <div class="swiper-slide first">
                <p><img src="002.gif" alt=""></p>
                <p><img src="001.gif" alt=""></p>
                <p>欢迎来到千锋啥学科都有</p>
            </div>

            <!-- 第二页 [1] -->
            <div class="swiper-slide second">
                <p>姓名 : 张三</p>
                <p>年龄 : 18</p>
                <p>工作经历 : 10年</p>
                <p>学历 : 统招本科</p>
                <p>电话 : 13312345678</p>
                <p>邮箱 : 12345678@qq.com</p>
            </div>

            <!-- 第三页 [2] -->
            <div class="swiper-slide third"><p>haha</p></div>
        </div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <div class="music">
        <!--
          API
            + 获取 audio 元素
              => 元素.play()   播放
              => 元素.puase()  暂停
        -->
        <audio src="./丑八怪.mp3" style="display: none"></audio>
        <i></i>
    </div>

    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="./swiper.animate1.0.3.min.js"></script>
    <script>

        // 拿到所有的页面
        var pages = document.querySelectorAll('.swiper-slide');
        // 拿到audio元素
        var ele = document.querySelector('audio');
        ele.play()
        var mySwiper = new Swiper('#banner', {
            direction: 'vertical', // 垂直切换选项
            // 加滚动条 
            scrollbar: {
                el: '.swiper-scrollbar',
            },

            on: {
                // start 先弹框再切换 
                // end  先切换再弹框
                slideChangeTransitionEnd: function () {
                    // alert(this.activeIndex);// 打印当前切换到那张图片了
                    pages.forEach(item=>item.classList.remove('active'))
                    pages[this.activeIndex].classList.add('active')
                },
            },
        })        
    </script>
</body>

</html>